<template>
  <div>
    <van-button @click="send">在线咨询</van-button>

    <van-dialog v-model="show" title="标题" show-cancel-button>
      <div>
        <ul>
          <li v-for="(i, index) in meslist" :key="index">{{ i }}</li>
        </ul>
      </div>
      <div>
        <van-field v-model="mes" /><van-button @click="submit">发送</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { v4 as uuid } from "uuid";
export default {
  data() {
    return {
      show: false,
      mes: "",
      meslist: [],
      id: "",
    };
  },
  methods: {
    send() {
      this.show = true;
      this.conn();
    },
    conn() {
      this.id = uuid();
      this.ws = new WebSocket("ws://localhost:5000/sockconn?id=" + this.id);
      this.ws.onopen = () => {
        this.ws.send(JSON.stringify({ send: "conn", mes: "conn" }));
      };
      this.ws.onmessage = (res) => {
        console.log(res);
        var data = JSON.parse(res.data);
        this.meslist.push(data.meslist);
      };
    },
    submit() {
      var mm = this.id + "说:" + this.mes;
      this.meslist.push(mm);
      this.ws.send(JSON.stringify({ send: "kefu", mes: mm }));
    },
  },
};
</script>

<style>
</style>